<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>作品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加作品</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card style="height: 600px">
      <el-form>
        <table width="100%">
          <tbody>
          <tr>
            <th><em class="red">*</em> 发布人：</th>
            <td>
              <el-input type="text" v-model="addForm.username"></el-input>
            </td>


          </tr>
          <tr>
            <th><em class="red">*</em> 作品分类：</th>
            <td>
              <el-cascader
                props.expandTrigger="hover"
                v-model="addForm.selectedKeys"
                :options="parentCateList"
                :props="cascaderProps"
                clearable
                @change="handleChange">
              </el-cascader>
            </td>
          </tr>
          <tr>
            <th><em class="red">*</em> 作品名称：</th>
            <td>
              <el-input type="text" v-model="addForm.workName"></el-input>
            </td>


          </tr>
          <tr >
            <th><em class="red">*</em> 作品类型：</th>
            <td>
              <el-radio-group  style="margin-top: 35px" v-model="addForm.workFileType">
                <el-radio :label="0">视频</el-radio>
                <el-radio :label="1">图片</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <th><em class="red">*</em> 点击上传作品</th>
            <el-upload :auto-upload="false" style="margin-top: 20px" action=""
                       :on-change="uploadWorkFile">
              <el-button type="primary"
                         v-if="fileURL === 'http://127.0.0.1:8081/img/worksFile/上传.png'">上传文件
              </el-button>
              <img :src="fileURL" v-else style="width: 50%">
            </el-upload>
          </tr>
          <tr>
            <th>点击上传封面</th>
            <el-upload :auto-upload="false" style="margin-top: 20px" action=""
                       :on-change="uploadPoster">
              <el-button type="primary"
                         v-if="posterURL === 'http://127.0.0.1:8081/img/worksFile/上传.png'">
              </el-button>
              <img :src="posterURL" v-else style="width: 50%;">
            </el-upload>
          </tr>
          </tbody>
        </table>
        <el-button type="primary" style="margin-top: 20px;margin-left: 300px;" @click="add(workName)">确认</el-button>
      </el-form>
    </el-card>

  </div>
</template>

<script>
    import {getAllCategory} from "../../assets/api/categoryApi";
    import {addWork, uploadFile} from "../../assets/api/worksInfoApi";

    export default {
        data() {
            return {
                posterURL: this.$store.state.Host + '/img/worksFile/上传.png',
                workFilename: '',
                poster: '',
                activeIndex: '0',
                pageNum: 1,
                pageSize: 5,
                addForm: {},
                addFormRules: {
                    workName: [{required: true, message: '请输入作品名称', trigger: 'blur'}],
                    selectedKeys: [{required: true, message: '请选择作品分类', trigger: 'change'}],
                    username: [{required: true, message: '请输入发布人', trigger: 'blur'}]
                },
                selectedKeys: [],
                parentCateList: [],
                cascaderProps: {
                    value: 'categoryId',
                    label: 'categoryName',
                    children: 'children'
                },
                fileList2:[],
                fileURL:this.$store.state.Host +'/img/worksFile/上传.png',
            }
        },
        methods: {
            uploadPoster(file) {
                this.poster = file.raw
            },
            uploadWorkFile(file) {
                this.workFilename = file.raw
            },
            handleChange() {
                this.addForm.categoryId = this.selectedKeys[1];
            },
            getCategoryList() {
                let data = {};
                data.categoryLevel = 0;
                getAllCategory(this.pageNum, this.pageSize, data).then((res) => {
                    if (res.code !== 200) {
                        return this.$message.error(res.message);
                    }
                    this.parentCateList = res.data.records;
                })
            },
            add(){
                let data = new FormData()
                data.append('file', this.workFilename)
                data.append('posterFile', this.poster)
                data.append('categoryId', this.addForm.selectedKeys[1]);
                data.append('workName', this.addForm.workName);
                data.append('workFileType',this.addForm.workFileType);
                data.append('username',this.addForm.username)
                addWork(data).then(res => {
                    if (res.code !== 200) {
                        return this.$message.error(res.message);
                    } else {
                        this.$message.success(res.message);
                        this.$router.push('/worksInfo');
                    }

                })

            },
        },
        created() {
            this.getCategoryList();
        }
    }
</script>

<style lang="less" scoped>
  @import "../../styles/css/global.css";

  /deep/ .el-step {
    margin: 15px 0;
  }

  /deep/ .el-step__title {
    font-size: 13px;
  }

  .btnAdd{
    float: left;
    margin-left: 50px;
    margin-top: 20px;
  }
</style>
